<template>
  <div class='container'>
    <div class="container_top">
      <span class='fz'>关键字</span>
      <el-input v-model="queryParams.keyword" placeholder="根据编号搜索" style="width:20%"></el-input>
      <div class="right">
        <el-button @click="clearInput">清除</el-button>
        <el-button class="search" type="primary" @click="toEdit">搜索</el-button>
      </div>
      <div class="middle">
        <i class="el-icon-info">
          数据一共{{ total }}条
        </i>
      </div>
    </div>
    <el-card style="margin-top:10px;">
      <template>
        <!--        :data="Sublist.slice((queryParams.page-1)*queryParams.pageSize,queryParams.page*queryParams.pageSize)"-->
        <el-table
          v-loading="loading"
          :data="Sublist"
          style="width:100%; border-radius:5px">
          <el-table-column
            label="编号"
            prop="id"
            width="190">
          </el-table-column>
          <el-table-column
            :formatter="formType"
            label="题型"
            prop="questionType"
          >
          </el-table-column>
          <el-table-column
            label="题目编号"
            prop="questionIDs"
            width="195"
          >
            <template v-slot="{row}">
              <div v-for="(items,index) in row.questionIDs" :key="index">
                <a class="blue" @click="isShowAddBox=true">{{ items.number }}
                  <br></a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            prop="addTime"
            width="170"
          >
          </el-table-column>
          <el-table-column
            label="答题时间（S）"
            prop="totalSeconds"
          >
          </el-table-column>
          <el-table-column
            label="正确率（%）"
            prop="accuracyRate"
          >
          </el-table-column>
          <el-table-column
            label="录入人"
            prop="userName"
          >
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template v-slot="{row}">
              <el-button class="del" size="small" title="删除" type="text" @click="handleDelete(row.id)">
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="pagination">
                <el-pagination
                  :current-page="queryParams.page"
                  :page-size="queryParams.pagesize"
                  :page-sizes="[20, 40, 100, 200]"
                  :total="total"
                  background
                  layout="->, total, sizes, prev, pager, next, jumper"
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange">
                </el-pagination>
      </div>
    </el-card>
<!--  弹窗部分 题目预览-->
    <el-dialog :visible.sync="isShowAddBox" title="题目预览" @close="handleClose">
      <el-row class="row-bg" type="flex">
        <el-col :span="6">
          <div class="grid-content bg-purple">【题型】:</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">【编号】：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【难度】：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【标签】：</div>
        </el-col>
      </el-row>
      <el-row class="row-bg" type="flex">
        <el-col :span="6">
          <div class="grid-content bg-purple">【学科】：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【目录】：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【方向】：</div>
        </el-col>
      </el-row>
      <hr>
      <p class="question">【题干】：</p>
      <div>选项：（以下选中的选项为正确答案）</div>
      <hr>
      <span>【参考答案】:</span>
      <el-button type="danger" @click="show=!show"> 视频答案预览</el-button>
            <div class="videos1">
              <video class="videos"  controls muted loop v-show="show" ></video>
            </div>
      <hr>
      <p class="answer">【答案解析】：</p>
      <br>
      <hr>
      <p class="remarks">【题目备注】：</p>
      <div class="el-footer">
        <el-button @click="handleClose" class="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import axios from 'axios'
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import { questionType } from '../../api/hmmm/constants'

export default {
  data () {
    return {
      // 总条数
      Sublist: [],
      // 判断题型类型
      questionType,
      // 题目编号
      list_data: [],
      // 题目列表 +++ 分页参数
      list: [],
      // 总数
      total: 0,
      queryParams: {
        page: 1,
        pagesize: 10,
        // 查询
        keyword: ''
      },
      // 视频弹窗是否显示
      show: false,
      // 表单数据
      isShowAddBox: false,
      // 出现加载动画
      loading: false
    }
  },
  created () {
    // 该方法发送axios请求获取所有的数据
    // axios.get('http://localhost:7001/questions/randoms?page=1&pagesize=200').then(res => {
    //   this.tableData = res.data.items
    //   res.data.items.forEach(item => {
    //     this.list_data = item.questionIDs
    //   })
    //   // this.totals = res.data.counts
    //   this.total = res.data.counts
    // }).catch(error => {
    //   console.log(error)
    // })
    this.getList()
  },
  methods: {
    // 查询
    async toEdit () {
      this.queryParams.page = 1
      await this.getList(this.queryParams)
    },
    // 弹窗关闭
    handleClose () {
      this.isShowAddBox = false
      this.show = false
    },

    // 监听每页条数的变化
    handleSizeChange (value) {
      this.queryParams.pagesize = value
      this.queryParams.page = 1
      this.getList()
    },

    // 监听页码的切换操作
    handleCurrentChange (value) {
      // page表示切换后最新的页码
      this.queryParams.page = value
      this.getList()
    },
    // 获取列表数据
    async getList () {
      try {
        this.loading = true
        const ret = await randoms(this.queryParams)
        if (ret.status === 200) {
          this.Sublist = ret.data.items
          this.total = ret.data.counts
        }
      } catch {
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    },
    // 判断题目类型
    formType (row) {
      const info = this.questionType.find(item => parseInt(item.value) === parseInt(row.questionType))
      if (info.value === 1) {
        return info.label
      } else if (info.value === 2) {
        return info.label
      } else if (info.value === 3) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 清空输入框
    clearInput () {
      this.queryParams.keyword = ''
    },
    //  del 删除操作
    async handleDelete (id) {
      const data = {
        id
      }
      try {
        const ret = await this.$confirm('确认要删除该数据吗？', '删除操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 点击了取消操作
        if (ret === 'cancel') return
        // 点击确定操作，调用接口
        const delRet = await removeRandoms(data)
        if (delRet.status === 200) {
          // 删除成功，刷新列表
          // this.loadList()
          await this.getList()
          this.$message.success('删除成功')
        } else {
          // 删除失败
          this.$message.error(delRet.message)
        }
      } catch {
        this.$message.error('删除失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  // scss环境中不可以使用/deep/，需要使用::v-deep
  ///deep/ .el-card__body {  less
  ::v-deep .el-card__body {
    padding: 0 !important;
  }

  //width: auto;
  //height: 100%;
  background-color: #fff;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;

  .container_top {
    .fz {
      color: #606266;
      font-size: 14px;
      font-weight: bold;
      margin: 10px 10px 10px 30px;
    }

    .right {
      float: right;

      .search {
        margin-right: 10px;
      }
    }
  }

  .middle {
    .el-icon-info {
      padding-left: 20px;
      padding-right: 20px;
    }

    border-radius: 5px;
    margin: 20px 0;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    background-color: #f4f4f5;
    color: #909399;
  }

  .del {
    width: 30px;
    height: 30px;
    //line-height: 30px;
    background-color: #f6d3d9;
    border-radius: 50%;

    &:hover {
      background-color: red;

      .el-icon-delete {
        color: #fff
      }
    }
  }

  .el-icon-delete {
    color: #f56c6c;
  }

  .blue {
    color: rgb(0, 153, 255);
  }

  .pagination {
    margin: 20px 10px;
  }

  .grid-content {
    padding: 10px !important;
  }

  .el-footer {
    text-align: right;
  }

  .question {
    margin: 10px 0 10px 0;
  }

  .answer {
    margin: 10px 0 10px 0;

  }

  .remarks {
    margin: 10px 0 0 0;

  }
  .videos{
    width:400px;
    height:300px;
    margin: 10px 0;
  }
  ::v-deep.el-dialog{
    width:900px !important;
  }
  .close{
    background-color:#409eff;
    color: #fff
  }

}

</style>
